<template>
  <view class="rank" :class="type">
    <view class="rank-title">
      <text class="icon icon-rank"></text>
      <text>{{title}}</text>
    </view>
    <view class="rank-list">
      <view class="rank-list-item" v-for="(item, index) in list" :key="index" @click="handleToDetail(item)">
        <view class="rank-list-item-num">{{index+1}}</view>
        <view class="rank-list-item-title u-line-1">{{item.activityName}}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { reqAppAddBrowseRecord } from "@/api/modules/report";

export default {
  props: {
    type: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
    list: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
    }
  },
  methods: {
    handleToDetail(item) {
      let params = {
        mpaActivityId: item.activityIdCode,
        activityName: item.activityName,
        activityDesc: item.activityIntroduce,
        browsePersonId: this.personId,
        moduleType: "OCCUPATION_MODULE_TYPE",
      }
      reqAppAddBrowseRecord(params, this.personId);
      if(item.activityTypeCode == 'CAREER_CASE') {
        uni.navigateTo({
          url: '/pagesSub/companyCenter/case/detail?id=' + item.activityIdCode
        })
      } else if(item.activityTypeCode == 'CAREER_REPORT') {
        uni.navigateTo({
          url: '/pagesSub/companyCenter/report/detail?id=' + item.activityIdCode
        })
      }
      
    }
  }
}
</script>

<style lang="scss" scoped>
.rank {
  margin-right: 16rpx;
  width: 460rpx;
  padding: 28rpx 24rpx;
  background: #FFFFFF;
  border-radius: 8rpx;
  border: 4rpx solid #ffffff;

  .icon-rank {
    margin-right: 20rpx;
    width: 36rpx;
    height: 36rpx;
    vertical-align: bottom;
  }

  &.red {
    border-color: #FFF2EF;
    background: linear-gradient(169deg, #FFEBE7 0%, rgba(255,255,255,0) 11%);
    
    .icon-rank {
      background-image: url($img-base + 'library/hot.png');
    }

    .rank-title {
      color: #FF7731;
    }
  }
  
  &.yellow {
    border-color: #FFEEE1;
    background: linear-gradient(169deg, #FFF5E1 0%, rgba(255,255,255,0) 11%);

    .icon-rank {
      background-image: url($img-base + 'library/thumb.png');
    }

    .rank-title {
      color: #F89536;
    }
  }

  &.blue {
    border-color: #E7F1FF;
    background: linear-gradient(169deg, #E4EFFF 0%, rgba(255,255,255,0) 11%);

    .icon-rank {
      background-image: url($img-base + 'library/new.png');
    }

    .rank-title {
      color: #1E78FF;
    }
  }

  &-title {
    display: flex;
    align-items: center;
    margin-bottom: 28rpx;
    font-size: $uni-font-size-lg;
    font-weight: bold;
  }

  &-list {
    &-item {
      margin-bottom: 32rpx;

      &:nth-child(-n+3) {
        .rank-list-item-num {
          color: #FF6D00;
        }
      }

      &-num, &-title {
        display: inline-block;
        vertical-align: middle;
      }

      &-num {
        margin-right: 16rpx;
        width: 44rpx;
        color: #999999;
        text-align: center;
      }

      &-title {
        width: 310rpx;
      }
    }
  }

}
</style>